<template>
  <div style="margin-left:15px;margin-top:15px;">

    <el-form :model="roomForm" :inline="true">
        <el-form-item label="楼层：">
        <el-select
          v-model="roomForm.floor"
          placeholder="请选择楼层号"
        >
          <el-option label="一楼" value="1"> </el-option>
          <el-option label="二楼" value="2"> </el-option>
          <el-option label="三楼" value="3"> </el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="阅览室名称">
          <el-input
            v-model="roomForm.roomName"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="阅览室编号">
          <el-input
            v-model="roomForm.roomNo"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="roomGetData">查询</el-button>
      </el-form-item>
      <el-form-item v-if="userInfo.type==='1'">
        <el-button @click="openRoomDialog('添加阅览室')">添加阅览室</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="roomData"
        border
        class="table"
        highlight-current-row>
         <el-table-column
          prop="roomNo"
          label="阅览室编号"
          min-width="100"
        >
         </el-table-column>
        <el-table-column
          prop="roomName"
          label="阅览室名称"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="floor"
          label="阅览室所在楼层"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="creditLevel"
          label="预约人信用最低值"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="seatTotalNum"
          label="阅览室座位总数"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="reservedSeatNum"
          label="阅览室可被预约座位数"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="unreservedSeatNum"
          label="阅览室不可被预约座位数"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
        v-if="userInfo.type==='1'"
          label="操作"
          min-width="150"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="openRoomDialog('修改阅览室', scope.row)"
              >修改</el-button
            >
            <el-popconfirm
              confirmButtonText="确定"
              cancelButtonText="取消"
              icon="el-icon-info"
              iconColor="red"
              @onConfirm="deleteRoom(scope.row.id)"
              title="确定要删除该阅览室吗？"
            >
              <el-button slot="reference" type="text" icon="el-icon-delete"
                >删除</el-button
              >
            </el-popconfirm>
            <el-popconfirm
              confirmButtonText="确定"
              cancelButtonText="取消"
              icon="el-icon-info"
              iconColor="red"
              @onConfirm="addSeat(scope.row.id)"
              title="确定要添加座位吗？"
            >
            <el-button
            slot="reference"
              type="text"
              icon="el-icon-plus"
              >添加座位</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
    </el-table>
       <!--添加/修改 模态框-->
    <el-dialog
      :title="dialogRoomTitle"
      :visible.sync="dialogRoomVisible"
      width="50%"
    >
      <el-form
        :model="editRoom"
        ref="editRoom"
        labelPosition="left"
        inline
      > 
        <el-form-item label="楼层：">
        <el-select
          v-model="editRoom.floor"
          placeholder="请选择楼层"
        >
          <el-option label="一楼" :value="1"> </el-option>
          <el-option label="二楼" :value="2"> </el-option>
          <el-option label="三楼" :value="3"> </el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="阅览室编号" prop="roomNo">
          <el-input
            v-model="editRoom.roomNo"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="阅览室名称" prop="roomName">
          <el-input
            v-model="editRoom.roomName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="预约人信用最低值" prop="creditLevel">
          <el-input
            v-model="editRoom.creditLevel"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="margin-right:15px" @click="dialogRoomVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addRoom"
          v-if="dialogRoomTitle === '添加阅览室'"
          >提 交</el-button
        >
        <el-button
          type="primary"
          @click="editRooms"
          v-if="dialogRoomTitle === '修改阅览室'"
          >保 存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import webservice from "@/utils/webservice";
export default {
    data(){
        return{
            roomForm:{},
      dialogRoomTitle:'',
      dialogRoomVisible:false,
      userInfo:{},
      roomData:[],
      editRoom:{},
      seatData:[],
      editSeat:{},
        }
    },
    created(){
      if(this.userInfo.type==='0'){
        this.$message.error({
            message: '您没有权限查看该模块',
            showClose: true,
            duration: 5000,
          });
          this.$router.push('/')
      }
    },
    mounted(){
        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.roomGetData()
    },
    methods:{
         //房间信息
    roomGetData() {
      const _param = {
        floor: this.roomForm.floor,
        roomName: this.roomForm.roomName,
        roomNo:this.roomForm.roomNo,
      };
      const _params = JSON.stringify(_param);
      webservice.HttpPost("/api/room/selectRoomList", _params, (data) => {
        if (data.code === 200) {
          this.roomData = data.data;
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
           //打开 添加/编辑房间 模态框
    openRoomDialog(flag, row) {
      this.dialogRoomTitle = flag;
      if(flag==='添加阅览室'){
        this.editRoom ={}
      }else{
         this.editRoom = JSON.parse(JSON.stringify(row));
      }
      this.dialogRoomVisible = true;
      
     
    },
    //添加阅览室
    addRoom(){
      const _param = {
        creditLevel: this.editRoom.creditLevel,
        floor: this.editRoom.floor,
        roomNo: this.editRoom.roomNo,
        roomName:this.editRoom.roomName
      };
      const _params = JSON.stringify(_param);
      webservice.HttpPost("/api/room/insertRoom", _params, (data) => {
        if (data.code === 200) {
          this.dialogRoomVisible = false
          this.roomGetData()
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
    //编辑阅览室
    editRooms(){
      const _param = {
        id:this.editRoom.id,
        creditLevel: this.editRoom.creditLevel,
        floor: this.editRoom.floor,
        roomNo: this.editRoom.roomNo,
        roomName:this.editRoom.roomName
      };
      const _params = JSON.stringify(_param);
      webservice.HttpPost("/api/room/updateRoom", _params, (data) => {
        if (data.code === 200) {
          this.dialogRoomVisible = false
          this.$message.success({
            message: '修改成功！',
            showClose: true,
            duration: 1000,
          });
          this.roomGetData()
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
    //添加座位
    addSeat(id){
      const _param = {
        roomId:id,
      };
      const _params = JSON.stringify(_param);
      webservice.HttpPost("/api/seat/insertSeat", _params, (data) => {
        if (data.code === 200) {
          this.$message.success({
            message: '座位添加成功！',
            showClose: true,
            duration: 1000,
          });
          this.roomGetData()
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
    //删除阅览室
    deleteRoom(id){
      const _param = {
        id:id,
      };
      const _params = JSON.stringify(_param);
      webservice.HttpPost("/api/room/deleteRoom", _params, (data) => {
        if (data.code === 200) {
          this.$message.success({
            message: '阅览室删除成功！',
            showClose: true,
            duration: 1000,
          });
          this.roomGetData()
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    }
    }
}
</script>

<style>

</style>